<template>
  <div class="register">
    <div class="register-page">
      <h2 align="center">企业注册</h2>
      <form @submit.prevent="submitForm">
        <div class="user">
          <label>用户名</label>
          <input type="text" v-model="cusername" placeholder="请输入用户名">
          <p v-if="cusernameError" class="error-message">{{ cusernameError }}</p>
        </div>

        <div class="user">
          <label>密码</label>
          <input type="password" v-model="cpassword" placeholder="请输入密码">
          <p v-if="cpasswordError" class="error-message">{{ cpasswordError }}</p>
        </div>

        <div class="user">
          <label>确认密码</label>
          <input type="password" v-model="cpassword1" placeholder="请确认密码">
        </div>

        <div class="user">
          <label>公司名</label>
          <input type="text" v-model="cname" placeholder="请输入公司名">
          <p v-if="cnameError" class="error-message">{{ cnameError }}</p>
        </div>

        <div class="user">
          <label>公司电话</label>
          <input type="text" v-model="cphone" placeholder="请输入公司电话">
          <p v-if="cphoneError" class="error-message">{{ cphoneError }}</p>
        </div>

        <div class="user">
          <label>公司地点</label>
          <input type="text" v-model="caddres" placeholder="请输入公司地点">
          <p v-if="caddresError" class="error-message">{{ caddresError }}</p>
        </div>

        <div class="user">
          <label>公司邮箱</label>
          <input type="text" v-model="cemail" placeholder="请输入公司邮箱">
          <p v-if="cemailError" class="error-message">{{ cemailError }}</p>
        </div>

        <div class="user">
          <label>建立年份</label>
          <input type="text" v-model="cyear" placeholder="请输入建立年份">
          <p v-if="cyearError" class="error-message">{{ cyearError }}</p>
        </div>

        <div class="user">
          <input type="submit" value="立即注册" id="bt">
        </div>
        
      </form>
      <div class="router">
        <router-link to="/login">已有账号 点击登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      cusername: '',
      cusernameError: '',
      cpassword: '',
      cpasswordError: '',
      cpassword1: '',
      cname: '',
      cnameError: '',
      cphone: '',
      cphoneError: '',
      caddres: '',
      caddresError: '',
      cemail: '',
      cemailError: '',
      cyear: '',
      cyearError: ''
    };
  },

  methods: {
    checkUsername(cusername) {
      const regex = /^\d{6,10}$/;
      return regex.test(cusername);
    },

    checkPassword(cpassword) {
      const regex = /^[a-zA-Z\d]{6,10}$/;
      return regex.test(cpassword);
    },

    checkName(cname) {
      const regex = /^(?!\s*$)[A-Za-z0-9._\-\(\)\u4e00-\u9fa5\（）\s-]+$/;
      return regex.test(cname);
    },

    checkPhone(cphone) {
      const regex = /^\d{11}$/;
      return regex.test(cphone);
    },

    checkAddress(caddres) {
      const regex = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
      return regex.test(caddres);
    },

    checkEmail(cemail) {
      const regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      return regex.test(cemail);
    },

    checkYear(cyear) {
      const regex = /^\d{4}$/;
      return regex.test(cyear);
    },

    submitForm() {
      this.cusernameError = '';
      this.cpasswordError = '';
      this.cnameError = '';
      this.cphoneError = '';
      this.caddresError = '';
      this.cemailError = '';
      this.cyearError = '';

      if (!this.checkUsername(this.cusername)) {
        this.cusernameError = '用户名不符合要求';
      }

      if (!this.checkPassword(this.cpassword)) {
        this.cpasswordError = '密码不符合要求';
      }

      if (!this.checkName(this.cname)) {
        this.cnameError = '公司名不符合要求';
      }

      if (!this.checkPhone(this.cphone)) {
        this.cphoneError = '公司电话不符合要求';
      }

      if (!this.checkAddress(this.caddres)) {
        this.caddresError = '公司地点不符合要求';
      }

      if (!this.checkEmail(this.cemail)) {
        this.cemailError = '公司邮箱不符合要求';
      }

      if (!this.checkYear(this.cyear)) {
        this.cyearError = '建立年份不符合要求';
        return;
      }

      if (this.cpassword1 !== this.cpassword) {
        alert('请确保密码输入一致');
        return;
      }

      const data = new FormData();
      data.append("cusername", this.cusername);
      data.append("cpassword", this.cpassword);
      data.append("cname", this.cname);
      data.append("cphone", this.cphone);
      data.append("caddress", this.caddres);
      data.append("cemail", this.cemail);
      data.append("cyear", this.cyear);

      axios.post('http://localhost:8080/hqdx/company/register', data)
        .then(response => {
          alert("注册成功");
          this.$router.push('/login');
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.register {
  border: rgb(255, 255, 255) solid 1px;
  height: 1000px;
  background-image: url('/public/image/登录页面背景.png');
  background-size: 100% 100%;
}

.register-page {
  opacity: 0.85;
  width: 500px;
  height: 620px;
  border: white solid 1px;
  background-color: rgb(247, 243, 243);
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.user {
  margin-top: 6%;
}

.user label {
  display: block;
  float: left;
  width: 30%;
}

.router{
  margin-top: 10px;
  float:right;
}
.user input {
  display: block;
  width: 55%;
  height: 25px;
  background-color: white;
  border: rgb(233, 230, 230);
}

.user select {
  display: block;
  width: 20%;
  height: 25px;
  background-color: white;
  border: rgb(233, 230, 230);
}

#bt {
  display: flex;
  margin: 0 auto;
  width: 150px;
  height: 50px;
  background-color: white;
  color: rgb(17, 174, 168);
  font-size: 16px;
  border: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#bt:hover {
  background-color: #aababa;
}



.error-message {
  color: red;
  text-align: center;
  margin-top: 5px;
}
</style>
